<html>
<head>
	<title>Versão Demo carouFredSel</title>
	<!-- Autores: Rafael e Sérgio -->

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery.carouFredSel-6.2.1-packed.js"></script>

	<style type="text/css">

	/********************* CSS Reset *******************************/
		html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,caption, tbody, tfoot, thead
		{
			margin: 0;	padding: 0;
		}

		a {text-decoration: none;}

	/********************* configurações carrosel banner *******************************/	
		.containerBanner { width: 100%; float: left; overflow: hidden; text-align: center; position: relative; height: 450px;}
		.banner { position: absolute; left: 50%; }
		.sliderBanner li {width: 100%; display: block; float: left;}
		.sliderBanner li a {float: left;}
		.paginacaoBanner {position: absolute; width: 100%; text-align: center; float: left; left: 0; bottom: 10px;}
		.paginacaoBanner a {width: 15px; height: 15px; border-radius: 50%; margin-left: 5px; margin-right: 5px; background: white; position: relative; z-index: 9999; display: inline-block;}
		.paginacaoBanner a:hover, .paginacaoBanner a.selected {background: red;}
		.paginacaoBanner a span {text-indent: -9999px; overflow: hidden; font-size: 0;}
		.prevBanner {position: absolute; float: left; top: 175px; left: 0px; z-index: 999; font-size: 80px; color: white;}
		.nextBanner {position: absolute; float: left; top: 175px; right: 0px; z-index: 999; font-size: 80px; color: white;}


	/********************* configurações carrosel lista *******************************/	
		.containerCarosselLista {width: 100%; float: left; margin-top: 50px;}
		.bannerLista {position: relative; width: 500px; margin: 0 auto;}
		.sliderBannerLista {float: left; margin-left: 20px;}
		.sliderBannerLista li { display: block; float: left; width: 115px; text-align: center;}
		.paginacaoBannerLista { width: 100%; text-align: center; float: left; margin-top: 15px;}
		.paginacaoBannerLista a {width: 15px; height: 15px; border-radius: 50%; margin-left: 5px; margin-right: 5px; background: black; position: relative; z-index: 9999; display: inline-block;}
		.paginacaoBannerLista a:hover, .paginacaoBannerLista a.selected {background: red;}
		.paginacaoBannerLista a span {text-indent: -9999px; overflow: hidden; font-size: 0;}
		.prevBannerLista {position: absolute; float: left; top: 30px; left: 0px; z-index: 999; font-size: 30px; color: red;}
		.nextBannerLista {position: absolute; float: left; top: 30px; right: 0px; z-index: 999; font-size: 30px; color: red;}


	/********************* configurações carrosel lista colorida *******************************/	
		.containerCarosselListaColorida {width: 100%; float: left; margin-top: 50px;}
		.bannerListaColorida {position: relative; width: 500px; margin: 0 auto;}
		.sliderBannerListaColorida {float: left; margin-left: 20px;}
		.sliderBannerListaColorida li { display: block; float: left; width: 115px; text-align: center;}
		.sliderBannerListaColorida li a {width: 100%; float: left;}
		.sliderBannerListaColorida img {margin: 0 auto}
		.paginacaoBannerListaColorida { width: 100%; text-align: center; float: left; margin-top: 15px;}
		.paginacaoBannerListaColorida a {width: 15px; height: 15px; border-radius: 50%; margin-left: 5px; margin-right: 5px; background: black; position: relative; z-index: 9999; display: inline-block;}
		.paginacaoBannerListaColorida a:hover, .paginacaoBannerListaColorida a.selected {background: red;}
		.paginacaoBannerListaColorida a span {text-indent: -9999px; overflow: hidden; font-size: 0;}
		.prevBannerListaColorida {position: absolute; float: left; top: 30px; left: 0px; z-index: 999; font-size: 30px; color: red;}
		.nextBannerListaColorida {position: absolute; float: left; top: 30px; right: 0px; z-index: 999; font-size: 30px; color: red;}



	</style>



</head>
<body>
	<!-- carrossel banner -->
	<div class="containerBanner">
		<div class="banner">
			<a href="#" class="prevBanner"> < </a>
			<ul id="sliderBanner" class="sliderBanner">
				<li> <a href="javascript:void(0);" title=""> <img src="img_banner_01.jpg" /> </a> </li>
				<li> <a href="javascript:void(0);" title=""> <img src="img_banner_02.jpg" /> </a> </li>
				<li> <a href="javascript:void(0);" title=""> <img src="img_banner_03.jpg" /> </a> </li>
			</ul>
			<a href="#" class="nextBanner"> > </a>
		</div>
		<div class="paginacaoBanner"></div>
		
	</div>


	<!-- carrosel bannerClientes -->
	<div class="containerCarosselLista">

		<div class="bannerLista">
			<a href="#" class="prevBannerLista"> < </a>
			<ul id="sliderBannerLista" class="sliderBannerLista">
				<li> <a href="javascript:void(0);" title=""> <img src="1.jpg" /> </a> </li>
				<li> <a href="javascript:void(0);" title=""> <img src="2.jpg" /> </a> </li>
				<li> <a href="javascript:void(0);" title=""> <img src="3.jpg" /> </a> </li>
				<li> <a href="javascript:void(0);" title=""> <img src="4.jpg" /> </a> </li>
				<li> <a href="javascript:void(0);" title=""> <img src="5.jpg" /> </a> </li>
			</ul>
			<a href="#" class="nextBannerLista"> > </a>
		</div>
		<div class="paginacaoBannerLista"></div>

	</div>



	<!-- carrosel bannerLista Hover Colorido -->
	<div class="containerCarosselListaColorida">

		<div class="bannerListaColorida">
			<a href="#" class="prevBannerListaColorida"> < </a>
			<ul id="sliderBannerListaColorida" class="sliderBannerListaColorida">
				<li> 
					<a href="javascript:void(0);" title=""> 
						<img src="1.jpg" /> 
						<img src="1hover.jpg" style="display:none"/> 
					</a> 
				</li>
				<li> 
					<a href="javascript:void(0);" title=""> 
						<img src="2.jpg" /> 
						<img src="2hover.jpg" style="display:none"/>  
					</a> 
				</li>
				<li> 
					<a href="javascript:void(0);" title=""> 
						<img src="3.jpg" /> 
						<img src="3hover.jpg" style="display:none"/> 
					</a> 
				</li>
				<li> 
					<a href="javascript:void(0);" title=""> 
						<img src="4.jpg" /> 
						<img src="4hover.jpg" style="display:none"/>  
					</a> 
				</li>
				<li> 
					<a href="javascript:void(0);" title=""> 
						<img src="5.jpg" /> 
						<img src="5hover.jpg" style="display:none"/> 
					</a> 
				</li>
			</ul>
			<a href="#" class="nextBannerListaColorida"> > </a>
		</div>
		<div class="paginacaoBannerListaColorida"></div>

	</div>




</body>

<script type="text/javascript">
	// carrossel banner
	$(window).load(function() {

		var larguraBanner = 1366;
		var marginLeft = larguraBanner/2;
		
		$('.banner').css({'width':larguraBanner+'px','margin-left':'-'+marginLeft+'px'});

		$("#sliderBanner").carouFredSel({
			width: larguraBanner,
			items: 1,
			next: ".nextBanner",
			prev: ".prevBanner",
			align: 'center',
			scroll : {
				items: 1,
				duration: 1,	
	            timeoutDuration: 5000,
				pauseOnHover: true,
				fx: 'crossfade'
			},
			pagination: {
				container: ".paginacaoBanner",
				anchorBuilder  : null
			}
		});	
		
	});



	// carrosel lista
	$(window).load(function() {

		$("#sliderBannerLista").carouFredSel({
			items: 4,
			next: ".nextBannerLista",
			prev: ".prevBannerLista",
			align: 'center',
			scroll : {
				duration: 1,	
	            timeoutDuration: 5000,
				pauseOnHover: true,
				fx: 'crossfade'
			},
			pagination: {
				container: ".paginacaoBannerLista",
				anchorBuilder  : null
			}
		});	
		
	});



	// carrosel lista colorida
	$(window).load(function() {

		$("#sliderBannerListaColorida").carouFredSel({
			items: 4,
			next: ".nextBannerListaColorida",
			prev: ".prevBannerListaColorida",
			align: 'center',
			scroll : {
				duration: 1,	
	            timeoutDuration: 5000,
				pauseOnHover: true,
				fx: 'crossfade'
			},
			pagination: {
				container: ".paginacaoBannerListaColorida",
				anchorBuilder  : null
			}
		});	

		$('#sliderBannerListaColorida li a').bind({
			mouseenter: function() {
				$(this).find("img").first().css('display','none');
				$(this).find("img").last().css('display','block');
			},
			mouseleave: function() {
				$(this).find("img").first().css('display','block');
				$(this).find("img").last().css('display','none');
			}
		});
		
	});
</script>

</html>